<template>
<div class="real-time-component-list">
  <div
  v-for="(item,index) of componentData"
  :key="index"
  class="list"
  :class="{ active: transformIndex(index) === curComponentIndex }"
  @click="onClick(transformIndex(index))">
    <span class="iconfont" :class="'icon-' + getComponent(index).icon"></span>
    <span>{{ getComponent(index).label }}</span>
    <div class="icon-container">
      <span class="iconfont icon-pre" @click="upComponent(transformIndex(index))"></span>
      <span class="iconfont icon-next" @click="downComponent(transformIndex(index))"></span>
      <span class="iconfont icon-delete" @click="deleteComponent(transformIndex(index))"></span>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { useGlobalStore } from "@/store";

const globalStore = useGlobalStore()
const componentData = globalStore.componentData
const curComponentIndex = globalStore.curComponentIndex

const transformIndex = (index: number) => {
  return componentData.length - 1 - index;
};

const onClick = (index:number) =>{

}

const getComponent = (index:number) =>{}
const upComponent = (index:number) =>{}
const downComponent = (index:number) =>{}
const deleteComponent = (index:number) =>{}
const setCurComponent = (index:number)=>{

}
</script>

<style scoped lang="scss">
.real-time-component-list{
  height:35%;
  .list{
    height: 30px;
    cursor: grab;
    text-align: center;
    color: #333;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 0 10px;
    position: relative;
    user-select: none;

    &:active {
      cursor: grabbing;
    }

    &:hover {
      background-color: rgba(200, 200, 200, .2);

      .icon-container {
        display: block;
      }
    }
    .iconfont {
      margin-right: 4px;
      font-size: 16px;
    }

    .icon-text,
    .icon-picture {
      font-size: 14px;
    }

    .icon-container {
      position: absolute;
      right: 10px;
      display: none;

      .iconfont {
        cursor: pointer;
      }
    }
  }
}
.active {
  background: #ecf5ff;
  color: #409eff;
}
</style>